<template>
	<view style="padding: 10px;">
		<uni-forms ref="form" :rules="{}">
			<view v-for="(item,index) in type == 1?entity.imglist:entity.MediumList" :key="index">
				<view v-if="item.Mtype==='audio'">
					<eliseAudio audioId="audio1" :url="item.Murl" audioColor="#68d7bb" :durationS="item.duration" ref="eliseAudio"
						v-if="item.Mtype==='audio'" style="margin-bottom: 10px;"></eliseAudio>

					<uni-icons type="trash" v-if="item.Mtype==='audio'" @click="imgDel(index)" class="color" size="20"
						color="red"></uni-icons>
				</view>
			</view>
			<uni-forms-item name="">
				<uni-grid :column="3" :showBorder="false">
					<view v-for="(item,index) in type == 1?entity.imglist:entity.MediumList" :key="index">
						<uni-grid-item v-if="item.Mtype==='image'||item.Mtype==='video'">
							<image :src="item.Murl" style="width: 100%;height: 100%;" mode="aspectFit"
								@click="lookimg(type == 1?entity.imglist:entity.MediumList,index)" v-if="item.Mtype==='image'"></image>
							<view class="video" v-if="item.Mtype==='video'"
								@click="lookimg(type == 1?entity.imglist:entity.MediumList,index)">
								<uni-icons type="videocam-filled" size="36" color="#ccc"></uni-icons>
							</view>

							<uni-icons v-if="type == 1?entity.imglist.length>1:entity.MediumList.length>1" type="trash-filled"
								@click="imgDel(index,item.Murl)" class="color" size="20" color="#fff"
								style="position: absolute; right: 5%;top: 5%;z-index: 9; background-color:#ef0a0a; border-radius: 5px;">
							</uni-icons>
						</uni-grid-item>
					</view>
				</uni-grid>
			</uni-forms-item>
			<uni-forms-item v-for="item in entity.PropData" :key="item.ControlKey" :label="item.ControlName"
				:name="item.ControlKey">
				<view v-if="item.ControlName == '楼层'" style="display: flex;align-items: center;">
					<uni-easyinput placeholder="请输入" type="text" @input="propInput($event,item)" v-model="entity[item.ControlKey]"
						suffixIcon="层"></uni-easyinput>
				</view>
				<view v-if="item.ControlType == 'select'">
					<uni-data-select @change="propItemChange($event,item)" v-model="entity[item.ControlKey]"
						:localdata="item.CVdata">
					</uni-data-select>
					<uni-easyinput @confirm="customize(item)" @blur="customize(item)" placeholder="输入后点击键盘确认进行添加"
						v-if="entity[item.ControlKey]=='自定义'" v-model="item.customize">
					</uni-easyinput>
				</view>
				<uni-easyinput placeholder="请输入" v-if="item.ControlType == 'input'&&item.ControlName!='楼层'"
					@input="propInput($event,item)" v-model="entity[item.ControlKey]"></uni-easyinput>
				<view class="formCheck" v-if="item.ControlType == 'checkBox'">
					<view class="input" @click="openCheck(item)">
						<view class="value" v-if="entity[item.ControlKey]">{{entity[item.ControlKey]}}</view>
						<view class="noValue" v-else>请选择</view>
					</view>
					<view>
						<uni-icons @click="openCheck(item)" v-if="!entity[item.ControlKey]" type="bottom" size="14"
							color="#989898"></uni-icons>
						<uni-icons @click="clearCheckBoxSelect(item)" v-else type="clear" size="24" color="#c0c4cc"></uni-icons>
					</view>
					<CheckBoxSelect :ref="'CheckBoxSelect'+item.ControlKey" @confirm="CheckBoxSelectConfirm($event,item)" />
				</view>
			</uni-forms-item>
			<uni-forms-item name="" style="position: relative;">
				<uni-easyinput type="textarea" autoHeight v-model="entity.Content" placeholder="描述内容" :maxlength="-1">
				</uni-easyinput>
			</uni-forms-item>
		</uni-forms>
		<button style="margin-top: 10px;" type="warn" @click="confirm">保存</button>
		<!-- 录音 -->
		<uni-popup ref="audio" type="bottom" @close="audioClose" style="position: relative;" :is-mask-click="false"
			@maskClick="audioClose">

			<nb-voice-record @startRecord="start" @endRecord="end" @cancelRecord="cancel" btnDefaultText="录音"
				:popupFixBottom="250" btnHoverBgcolor="red" btnHoverFontcolor='#fff'
				:btnStyle="{width:'70px',height:'70px',background: 'red',color:'#fff',borderRadius: '50%',fontSize:'16px'}"
				style="float: left;margin-left: calc(50% - 35px);margin-bottom: 100rpx;">
			</nb-voice-record>
		</uni-popup>
		<!-- 常用语 -->
		<uni-popup ref="expression" type="bottom">
			<uni-list>
				<uni-list-item title="列表文字" v-for="item in 10" :key="item" clickable
					@click="expressionClick(item)"></uni-list-item>
			</uni-list>
		</uni-popup>
		<ImageView ref="ImageView" @setEdit="setEditObj" @close="imageClose"></ImageView>
		<videoView ref="videoView"></videoView>
	</view>
</template>

<script>
	import ImageView from '@/components/ImageView.vue'
	import videoView from '@/components/videoView.vue'
	import eliseAudio from '@/components/elise-audio/elise-audio.vue'
	import CheckBoxSelect from '@/components/checkBoxSelect.vue'
	export default {
		components: {
			ImageView,
			eliseAudio,
			videoView,
			CheckBoxSelect
		},
		data() {
			return {
				entity: {},
				type: 1,
				index: 0,
				TaskId: '',
				ProjectId: '',
				// 判断是编辑页面过来的编辑还是报告页面过来的编辑 走不同的接口逻辑
				dataUrl: "",
				editObj: '',
			}
		},
		onLoad(options) {
			this.entity = JSON.parse(options.data)
			console.log(this.entity);
			// 判断是编辑页面过来的编辑还是报告页面过来的编辑 走不同的接口逻辑
			if (options.interface) this.dataUrl = 'Base_ProjectWork/Base_Project/UpdateProjectTakeJsonData'
			else this.dataUrl = 'Base_ProjectWork/Base_Project/UpdateTakeJson'
			// type 1 本地 2 私人 3 图片进入需查询数据
			this.type = options.type
			this.index = options.index
			this.TaskId = options.id
			this.ProjectId = options.pid
			if (this.type == 1 || this.type == 2) {
				this.entity.PropData.forEach(item => {
					this.$set(this.entity, item.ControlKey, item.DefaultValue)
				})
			} else if (this.type == 3) {
				this.getTheData()
			}
		},
		methods: {
			// 楼层输入函数
			propInput(e, item) {
				console.log('楼层输入', e, item, this.entity)
				// 将输入的楼层加进entity整体数据中
				this.entity.PropData[0].DefaultValue = e
				console.log('最新enetiy数据', this.entity)
			},
			clearCheckBoxSelect(item) {
				item.DefaultValue = ''
				this.$set(this.entity, item.ControlKey, '')
			},
			CheckBoxSelectConfirm(e, item) {
				item.DefaultValue = e.join(',')
				// this.entity[item.ControlKey] = item.DefaultValue
				this.$set(this.entity, item.ControlKey, item.DefaultValue)
			},
			openCheck(item) {
				this.$refs['CheckBoxSelect' + item.ControlKey][0].open(item.CVdata, item.DefaultValue)
			},
			imageClose() {
				// this.navShow = true
			},
			// 存储画图数据
			setEditObj() {
				console.log('存储画图数据');
				uni.setStorageSync('uploadImgList', this.editObj)
			},
			getTheData() {
				this.$http('Base_ProjectWork/Base_Project/GetTakeNotesData', {
					"ProjectId": this.ProjectId,
					"TaskId": this.TaskId,
					"TakeNotesId": this.entity.TakeNotesId,
					"UserId": uni.getStorageSync('userInfo').Id
				}).then(res => {
					console.log(res);
					if (res.Success) {
						this.entity = res.Data
						this.entity.PropData.forEach(item => {
							this.$set(this.entity, item.ControlKey, item.DefaultValue)
						})
					} else {
						uni.showToast({
							icon: 'none',
							title: res.Msg
						})
					}
				})
			},
			//删除图片
			imgDel(index) {
				if (this.type == 1) {
					// #ifdef H5
					this.entity.imglist.splice(index, 1)
					// #endif
					// #ifdef APP
					uni.removeSavedFile({ //删除本地文件 
						filePath: this.entity.imglist[index].Murl,
						success: () => {
							this.entity.imglist.splice(index, 1)
						},
						complete: (resa) => {
							console.log(resa)
						}
					});
					// #endif
				} else {
					this.entity.MediumList.splice(index, 1)
				}
			},
			// 自定义
			customize(item) {
				if (item.CVdata.findIndex((im) => im.value == item.customize) !== -1)
					return this.$message.error("当前添加项已存在于列表中");
				item.CVdata.unshift({
					value: item.customize,
					text: item.customize,
				});
				this.$set(this.entity, item.ControlKey, item.customize);
				item.DefaultValue = item.customize;
				item.customize = "";
			},
			// 动态列表选择
			propItemChange(e, item) {
				item.DefaultValue = e
			},
			// 查看视频
			lookvideo(path) {
				this.$refs.videoView.open(path)
			},
			// 查看图片
			lookimg(path, index) {
				console.log('打印path', path)
				let newImageList = path[index]
				let str = newImageList.Murl.split('/')
				let strIndex = str.length - 1
				let newArr = str[strIndex]
				let name = str[strIndex].split('.')[0]
				console.log('newImageList', newImageList)
				newImageList.name = name
				newImageList.Content = this.entity.Content
				newImageList.PropData = this.entity.PropData

				let newArrayImageList = [newImageList]
				console.log('editPage查看图片', newImageList, newArrayImageList, path, index, str[strIndex].split('.')[0], this
					.entity);
				this.$refs.ImageView.open(newArrayImageList, index, false, true, 'upload')

				// let editObjContent = newImageList
				// delete editObjContent.Content
				// delete editObjContent.PropData
				// delete editObjContent.Videourl
				// console.log('存储', editObjContent, index)
				this.editObj = JSON.stringify({
					content: newArrayImageList,
					vix:index
				})
				// this.$refs.ImageView.open(path, this.entity.Content, index, this.entity.PropData, 'upload')
			},
			// 常用语选用
			expressionClick(item) {
				this.$set(this.entity, 'Content', item)
				this.$refs.expression.close()
			},
			// 录音
			audioOpen() {
				uni.hideTabBar()
				this.$refs.audio.open()
			},
			start() {
				console.log('开始录音')
				// 开始录音
			},
			end(event) {
				this.audioClose()
				console.log(event)
				var audio1 = uni.createInnerAudioContext();
				audio1.src = event.tempFilePath
				var duration = 0
				setTimeout(() => {
					duration = audio1.duration.toFixed(2)
					var strFileName = event.tempFilePath.substring(event.tempFilePath.lastIndexOf("/") + 1)

					this.entity.imglist.push({
						Mtype: 'audio',
						name: strFileName,
						audioplay: true,
						duration: audio1.duration.toFixed(2),
						Id: new Date().getTime(),
						Murl: event.tempFilePath
					})
					console.log(this.entity.imglist)
					console.log(event)
				}, 100)

				// 结束录音并处理得到的录音文件
				// event中，app端仅有tempFilePath字段，微信小程序还有duration和fileSize两个字段
			},
			cancel() {
				console.log('取消录音')
				// 用户取消录音
			},
			audioClose() {
				uni.showTabBar()
				this.$refs.audio.close()
			},
			// 保存
			confirm() {
				if (!this.entity.Content) return uni.showToast({
					icon: 'none',
					title: '请填写描述'
				})
				if (this.type == 1) {
					let arr = JSON.parse(uni.getStorageSync('fromdata'))
					arr.splice(this.index, 1, this.entity)
					uni.setStorageSync('fromdata', JSON.stringify(arr))
					this.backPage()
				} else {
					uni.showLoading()
					console.log('获取传递的参数', this.entity)
					this.$http(this.dataUrl, {
						"ProjectId": this.ProjectId,
						"TaskId": this.TaskId,
						TakeNotesList: [this.entity]
					}).then(res => {
						uni.hideLoading()
						if (res.Success) {
							this.backPage()
						} else {
							uni.showToast({
								icon: 'none',
								title: res.Msg
							})
						}
					})
				}
			},
			backPage() {
				uni.showToast({
					icon: 'none',
					title: '操作成功'
				})
				setTimeout(() => {
					uni.navigateBack()
				}, 1000)
			}
		}
	}
</script>

<style>
	.video {
		width: 100%;
		height: 100%;
		display: flex;
		align-items: center;
		justify-content: center;
		box-sizing: border-box;
		border: 1px solid #ccc;
	}

	.formCheck {
		width: 100%;
		flex: 1;
		border: 1px solid #e5e5e5;
		box-sizing: border-box;
		border-radius: 4px;
		padding: 0 5px;
		padding-left: 10px;
		position: relative;
		display: flex;
		align-items: center;
		border-bottom: solid 1px #e5e5e5;
		-webkit-user-select: none;
		user-select: none;
		flex-direction: row;
		max-width: 100%;
		height: 35px;
		color: #6a6a6a;
		font-size: 12px;

		.input {
			flex: 1;
			max-width: 100%;

			.value {
				width: 460rpx;
				font-size: 14px;
				color: rgb(58, 58, 58);
				overflow: hidden;
				white-space: nowrap;
				text-overflow: ellipsis;
			}
		}
	}
</style>